<template>
  <div class="admin-layout">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside 
        :width="collapsed ? '64px' : '200px'" 
        class="admin-aside"
      >
        <div class="sidebar">
          <!-- Logo区域 -->
          <SidebarLogo :collapse="collapsed" />
          
          <!-- 菜单区域 -->
          <div class="sidebar-menu">
            <el-menu
              :default-active="activeMenu"
              :collapse="collapsed"
              :unique-opened="false"
              background-color="#001529"
              text-color="#fff"
              active-text-color="#409eff"
              @select="handleMenuSelect"
            >
              <!-- 用户管理 -->
              <el-menu-item index="system-user">
                <el-icon><User /></el-icon>
                <span>用户管理</span>
              </el-menu-item>
              
              <!-- 仪表盘 -->
              <el-menu-item index="dashboard">
                <el-icon><Odometer /></el-icon>
                <span>仪表盘</span>
              </el-menu-item>
            </el-menu>
          </div>
        </div>
      </el-aside>
      
      <!-- 主体内容 -->
      <el-container class="admin-container" :class="{ 'collapsed': collapsed }">
        <!-- 顶部导航 -->
        <el-header 
          class="admin-header" 
          height="60px"
        >
          <div class="header-content">
            <div class="header-left">
              <Hamburger 
                :is-active="collapsed" 
                @toggle-click="toggleCollapse" 
                class="hamburger-container"
              />
              
              <Breadcrumb class="breadcrumb-container" />
            </div>
            
            <div class="header-right">
              <div class="header-actions">
                <!-- 全屏按钮 -->
                <Screenfull />
                
                <!-- 用户下拉 -->
                <el-dropdown @command="handleUserCommand">
                  <div class="user-dropdown">
                    <el-avatar :size="32" :src="userInfo?.avatar">
                      {{ userInfo?.username?.charAt(0) }}
                    </el-avatar>
                    <span class="username">{{ userInfo?.username }}</span>
                    <el-icon><ArrowDown /></el-icon>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                      <el-dropdown-item command="password">修改密码</el-dropdown-item>
                      <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </div>
        </el-header>
        
        <!-- 主内容区 -->
        <AppMain />
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore, useAppStore } from '@/store'
import Breadcrumb from '@/components/common/Breadcrumb.vue'
import Hamburger from '@/components/common/Hamburger.vue'
import SidebarLogo from '@/components/common/SidebarLogo.vue'
import Screenfull from '@/components/common/Screenfull.vue'
import AppMain from '@/components/common/AppMain.vue'
import {
  User,
  ArrowDown,
  Odometer
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const appStore = useAppStore()

const collapsed = computed(() => appStore.collapsed)
const activeMenu = ref('')

const userInfo = computed(() => userStore.userInfo)

// 切换侧边栏折叠状态
const toggleCollapse = () => {
  appStore.toggleSidebar()
}

// 菜单选择
const handleMenuSelect = (index) => {
  activeMenu.value = index
  
  // 根据菜单项导航
  const routeMap = {
    'system-user': '/admin/system/user',
    'dashboard': '/admin/dashboard'
  }
  
  const targetRoute = routeMap[index]
  if (targetRoute) {
    router.push(targetRoute)
  }
}

// 用户操作
const handleUserCommand = (command) => {
  switch (command) {
    case 'profile':
      router.push('/admin/profile')
      break
    case 'password':
      // 打开修改密码对话框
      break
    case 'logout':
      userStore.logout()
      router.push('/login')
      break
  }
}

// 监听路由变化，更新当前激活菜单
watch(
  () => route.path,
  (path) => {
    // 根据路径设置激活菜单
    if (path.includes('/admin/system/user')) {
      activeMenu.value = 'system-user'
    } else if (path.includes('/admin/dashboard')) {
      activeMenu.value = 'dashboard'
    }
  },
  { immediate: true }
)
</script>

<style scoped>
.admin-layout {
  height: 100vh;
  overflow: hidden;
}

.admin-aside {
  background: #001529;
  transition: width 0.2s;
  box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 1001;
}

.sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sidebar-menu {
  flex: 1;
  overflow-y: auto;
}

.admin-container {
  margin-left: 200px;
  transition: margin-left 0.2s;
  height: 100vh;
  overflow: hidden;
}

.admin-container.collapsed {
  margin-left: 64px;
}

.admin-header {
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  position: relative;
  z-index: 9;
}

.header-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hamburger-container {
  padding: 0 15px;
  line-height: 58px;
  height: 100%;
  float: left;
  cursor: pointer;
  transition: background 0.3s;
  -webkit-tap-highlight-color: transparent;
}

.hamburger-container:hover {
  background: rgba(0, 0, 0, 0.025);
}

.breadcrumb-container {
  float: left;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-dropdown:hover {
  background-color: #f5f5f5;
}

.username {
  font-size: 14px;
  color: #333;
}

:deep(.el-menu) {
  border-right: none;
}

:deep(.el-menu-item) {
  height: 48px;
  line-height: 48px;
}

:deep(.el-sub-menu .el-sub-menu__title) {
  height: 48px;
  line-height: 48px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .admin-aside {
    position: fixed;
    z-index: 1001;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.28s;
  }
  
  .admin-aside.mobile-aside {
    transform: translateX(0);
  }
  
  .mobile-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    opacity: 0.3;
    z-index: 1000;
  }
}
</style>